<script setup>
  import { onMounted, ref } from 'vue'
  import { onLoad, onShow } from '@dcloudio/uni-app'
  import { http } from '@/utils/http.js'
  import { useUsercodeStore } from '@/store/usercode.js'

  const agree = ref(true)
  // 用户信息星石(暂时)
  const balance = ref(0)
  const transaction_balance = ref(0)
  async function getUserMoney() {
    const res = await http.request({
      url: '/api/user/userMsg',
      method: 'POST',
      data: {},
    })
    console.log('user')
    balance.value = res.data.data.balance
    transaction_balance.value = res.data.data.transaction_balance
  }

  // 获取充值金额
  const levelList = ref([])
  async function getLevel() {
    const res = await http.request({
      url: '/api/recharge/getMoney',
      method: 'POST',
      data: {},
    })
    console.log('level')
    levelList.value = res.data
    level.value = res.data[0].money
  }

  //选择充值金额
  const level = ref(0)
  function chooseLevel(lev) {
    level.value = lev
  }

  //选择支付方式
  const payType = ref(1)
  function changePay(evt) {
    payType.value = evt.detail.value
  }

  //创建订单
  const orderId = ref()
  async function createOrders() {
    const res = await http.request({
      url: '/api/recharge/createRecharge',
      method: 'POST',
      data: {
        pay_type: payType.value,
        money: level.value,
        sorce: 1,
      },
    })
    orderId.value = res.data
    wxPay(res.data)
  }
  const paying = ref(1)
  async function wxPay(id) {
    const res = await http.request({
      url: '/api/recharge/rechargeWechatPay',
      method: 'POST',
      data: {
        id: id,
        type: 1,
      },
    })
    if (res.st == 1) {
      const accountInfo = uni.getAccountInfoSync()
      const appid = accountInfo.miniProgram.appId
      uni.requestPayment({
        provider: 'wxpay',
        timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
        nonceStr: res.data.nonceStr, // 随机字符串
        package: res.data.package, // 固定值
        signType: res.data.signType,
        paySign: res.data.paySign, // 签名，这里用的 MD5 签名
        success: function (res) {
          console.log('success:' + JSON.stringify(res))
          if (res.errMsg == 'requestPayment:ok') {
            uni.utils.toast('充值成功')
            userCodeStore.setIsTrans(1)
            setTimeout(() => {
              uni.switchTab({
                url: '/pages/mine/index',
              })
            }, 2000)
          }
        },
        fail: function (err) {
          uni.utils.toast('充值失败')
          // console.log('fail:' + JSON.stringify(err))
        },
      })
    } else {
      uni.utils.toast('拉起支付失败，请联系客服~')
    }
  }

  //轮询微信支付订单状态
  const timeStatu = ref(true)
  async function askWxPay() {
    setTimeout(() => {
      timeStatu.value = false
    }, 5000)
    const res = await http.request({
      url: 'api/recharge/getRechargePayInfo',
      method: 'POST',
      data: {
        id: orderId.value,
      },
    })
    if (res.st == 1) {
      uni.utils.toast('充值成功')
      const userCodeStore = useUsercodeStore()
      userCodeStore.setIsTrans(1)
      getUserMoney()
    } else {
      if (timeStatu.value) {
        askWxPay()
      } else {
        uni.utils.toast(res.msg)
      }
    }
    paying.value = 1
  }

  //官方微信支付
  // async function wxPay(id) {
  // 	const res = await http.request({
  // 		url: '/api/recharge/rechargeWechatPay',
  // 		method: 'POST',
  // 		data: {
  // 			id: id,
  // 		},
  // 	})
  // 	console.log(res)
  // 	if (res.st == 1) {
  // 		uni.requestPayment({
  // 			provider: 'wxpay',
  // 			timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
  // 			nonceStr: res.data.nonceStr, // 随机字符串
  // 			package: res.data.package, // 固定值
  // 			signType: res.data.signType,
  // 			paySign: res.data.paySign, // 签名，这里用的 MD5 签名
  // 			success: function (res) {
  // 				console.log('success:' + JSON.stringify(res))
  // 				if (res.errMsg == 'requestPayment:ok') {
  // 					uni.utils.toast('充值成功')
  // 					userCodeStore.setIsTrans(1)
  // 					setTimeout(() => {
  // 						uni.switchTab({
  // 							url: '/pages/mine/index',
  // 						})
  // 					}, 2000)
  // 				}
  // 			},
  // 			fail: function (err) {
  // 				uni.utils.toast('充值失败')
  // 				// console.log('fail:' + JSON.stringify(err))
  // 			},
  // 		})
  // 	} else {
  // 		uni.utils.toast(res.msg)
  // 	}
  // }

  //购买
  function buyStars() {
    if (!agree.value) {
      uni.utils.toast('请同意购买协议')
      return
    }
    createOrders()
  }

  //查看星石明细
  function goCheckStore() {
    uni.navigateTo({
      url: `/minePage/storedetail/index`,
    })
  }
  //协议
  function goRule(id) {
    uni.navigateTo({
      url: `/homePage/agreement/index?id=${id}`,
    })
  }
  onLoad(() => {
    getUserMoney()
    getLevel()
  })
  onShow(() => {
    if (paying.value == 2) {
      askWxPay()
    }
  })
</script>

<template>
  <view>
    <!-- 头部 -->
    <view class="top-item">
      <view class="balance">
        <view class="money">{{ balance }}</view>
        <image
          style="flex-shrink: 0"
          src="https://ojqn.wm2177.com/wechat_imgs/mine/wallet-icon.png"
          class="wallet-icon"
        ></image>
      </view>
      <view style="font-size: 32rpx; text-align: center"
        >货款({{ transaction_balance }})</view
      >
      <view class="details" @click="goCheckStore">星石明细</view>
    </view>

    <!-- <view class="balance-tit">选择购买档位</view> -->

    <!-- 选择档位 -->
    <!--    <view class="choose-money">
      <view
        class="money-list"
        v-for="(item, index) in levelList"
        :key="item.id"
        :class="{ 'choose-now': level == item.money }"
        @click="chooseLevel(item.money)"
      >
        <view class="detil-list">
          <view class="detil-num">{{ item.money }}星石</view>
          <image
            src="https://ojqn.wm2177.com/wechat_imgs/mine/wallet-icon.png"
            class="money-icon"
          ></image>
        </view>
        <view class="real-money">{{ item.money }}元</view>
      </view>
    </view> -->

    <!-- <view class="balance-tit">支付方式</view> -->
    <!-- //支付方式选择 -->
    <!--    <view class="wechat" style="">
      <view class="pay-list">
        <radio-group>
          <view class="group-item" @change="changePay">
            <view>
              <radio
                style="transform: scale(0.8)"
                value="1"
                color="#3d3d3d"
                :checked="payType == 1"
              />
            </view>
            <view
              style="
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
              "
            >
              <view style="display: flex; align-items: center">
                <image
                  style="width: 52rpx; height: 52rpx; margin-right: 18rpx"
                  src="../../static/weixinpay.png"
                  mode=""
                ></image>
                <text style="font-size: 24rpx">微信支付</text>
              </view>
            </view>
          </view>
          <view class="group-item">
            <view>
              <radio
                style="transform: scale(0.8)"
                value="2"
                :checked="payType == 2"
              />
            </view>
            <view
              style="
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
              "
            >
              <view style="display: flex; align-items: center">
                <image
                  style="width: 52rpx; height: 52rpx; margin-right: 18rpx"
                  src="../../static/zhifubbao.png"
                  mode=""
                ></image>
                <text style="font-size: 24rpx">支付宝</text>
              </view>
            </view>
          </view>
        </radio-group>
      </view>
    </view> -->
    <!-- 购买按钮 -->
    <!-- <view class="item-button" @click="buyStars">立即购买</view> -->

    <!--    <view class="about">
      <checkbox
        @click="agree = !agree"
        value="cb"
        :checked="agree"
        color="#3d3d3d"
        style="transform: scale(0.8)"
      />
      <view class="contactChoice1">我已阅读并同意</view>
      <view class="contactChoice1" style="color: #3d3d3d" @tap.stop="goRule(5)"
        >《用户购买协议》</view
      >
    </view>

    <view class="balance-tit">购买说明 </view>
    <view class="shows">
      <view class="shows-text">1、星石用在平台消费，且购买后不支持退款</view>
      <view class="shows-text">2、若遇到购买未到账，请联系客服</view>
    </view> -->
  </view>
</template>

<style lang="scss" scoped>
  page {
    background-color: #ffffff;
    font-family: OPPOSans;
  }
  .top-item {
    align-items: center;
    width: 100vw;
    height: 180rpx;
    background: linear-gradient(180deg, #ffe60f, #fff);
  }
  .balance {
    display: flex;
    flex-direction: row;
    font-size: 58rpx;
    font-family: OPPOSans;
    font-weight: 500;
    align-items: center;
    width: 500rpx;
    margin: auto;
    margin-left: 200rpx;
    padding-top: 40rpx;
  }
  .money {
    text-align: center;
    margin-left: 30rpx;
    margin: auto;
    align-items: center;
  }
  .wallet-icon {
    width: 50rpx;
    height: 44rpx;
    margin: auto;
    padding-right: 120rpx;
  }
  .details {
    text-align: center;
    margin-top: 8rpx;
    color: #f58300;
    text-decoration: underline;
    font-size: 28rpx;
    font-family: OPPOSans;
    font-weight: 500;
  }
  .balance-tit {
    margin: 30rpx 30rpx auto;
    font-size: 30rpx;
    font-family: OPPOSans;
    font-weight: 500;
  }

  .group-item {
    display: flex;
    align-items: center;
    padding: 22rpx 20rpx;
    // radio选中时背景颜色设置
    ::v-deep radio .wx-radio-input.wx-radio-input-checked {
      background-color: $all-color !important;
      border: 1px solid $all-color !important;
    }
  }
  .choose-money {
    justify-content: space-between;
    flex-wrap: wrap;
    display: flex;
    width: 95vw;
  }
  .money-list {
    width: 200rpx;
    height: 140rpx;
    border-radius: 14rpx;
    border: 2rpx solid #dcdada;
    box-sizing: border-box;
    align-items: center;
    margin-top: 30rpx;
    margin-left: 30rpx;
    text-align: center;
  }
  .detil-num {
    padding-left: 8rpx;
    width: 150rpx;
  }
  .detil-list {
    align-items: center;
    text-align: center;
    font-size: 26rpx;
    font-weight: 500;
    display: flex;
    flex-direction: row;
    margin: 30rpx 5rpx 20rpx 0rpx;
  }
  .real-money {
    font-size: 24rpx;
    font-weight: 400;
    color: #3d3d3d;
  }
  .money-icon {
    width: 28rpx;
    height: 22rpx;
  }
  .choose-now {
    background-color: #ffe60f;
    // border: 4rpx solid #7863ff;
  }
  .item-button {
    width: 90%;
    height: 90rpx;
    background-color: $all-color;
    margin: auto;
    margin-top: 38rpx;
    left: 50%;
    color: #3d3d3d;
    font-size: 30rpx;
    font-weight: bold;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 50rpx;
    line-height: 90rpx;
    font-family: OPPOSans;
    font-weight: 600;
  }

  .contactChoice1 {
    font-size: 22rpx;
    color: #9b9b9d;
    font-weight: 400;
  }
  .about {
    margin-top: 20rpx;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    // radio选中时背景颜色设置
    ::v-deep radio .wx-radio-input.wx-radio-input-checked {
      background-color: $all-color !important;
      // border: 1px solid $all-color !important;
      color: #3d3d3d;
    }

    ::v-deep checkbox .wx-checkbox-input.wx-checkbox-input-checked {
      color: #3d3d3d;
      background: $all-color;
    }

    ::v-deep .wx-checkbox-input.wx-checkbox-input-checked {
      border: 1px solid $all-color;
      color: #3d3d3d;
    }
  }
  .shows {
    font-size: 24rpx;
    color: #9b9b9d;
    font-weight: 400;
    margin: 30rpx 30rpx auto;
  }
  .shows-text {
    margin-top: 10rpx;
  }
</style>
